<template>
	<div class="login">
		<div style="position: absolute; width: 100%;">
			<div style="margin: 20px 0"></div>
			<el-card class="box-card">
				<div class="content-wrapper">
					<div class="content-item">
						<img class="icon" src="@/assets/链码数量.png" alt="Chaincode Icon"
							style="width: 50px; height: 50px;">
						<div class="label-value-wrapper">
							<span><span class="label">链码数量：</span>
								<span class="value">{{ chaincodeCount }}</span></span>
						</div>
					</div>
					<div class="divider"></div>
					<div class="content-item">
						<img class="icon" src="@/assets/区块数量.png" alt="Block Icon" style="width: 50px; height: 50px;">
						<div class="label-value-wrapper">
							<span><span class="label">区块数量：</span>
								<span class="value">{{ latestBlock }}</span></span>
						</div>
					</div>
					<div class="divider"></div>
					<div class="content-item">
						<img class="icon" src="@/assets/交易数量.png" alt="Transaction Icon"
							style="width: 50px; height: 50px;">
						<div class="label-value-wrapper">
							<span><span class="label">交易数量：</span>
								<span class="value">{{ txCount }}</span></span>
						</div>
					</div>
				</div>
			</el-card>
			<br />
			<h1>区块链状态</h1>
			<div style="margin: 20px 0"></div>
			<hr />
			<br />
			<el-row>
				<el-col :span="6">
					<el-card style="max-width: 500px;height: 450px;">
						<div
							style="font-family: 'Avenir', Helvetica, Arial, sans-serif;font-weight: bolder;font-size: larger;text-align: center;">
							<div style="padding-bottom: 2px;">组织交易数量</div>
						</div>
						<div>
							<div class="block" ref="barChart" style="width: 100%; height: 300px; padding-bottom: 20px;">
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card style="max-width: 500px;height: 450px;">
						<div>
							<div ref="lineChart" style="width: 100%; height: 400px;"></div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<div class="scrollable-container">
						<el-card>
							<div
								style="font-family: 'Avenir', Helvetica, Arial, sans-serif;font-weight: bolder;font-size: larger;text-align: center;">
								<div style="padding-bottom: 2px;position: relative;">最近交易</div>
							</div>
							<el-card class="block-card" v-for="(block,index) in block" :key="index"
								style="max-width: 500px;height: 450px;">
								<div class="block-wrapper">
									<div class="block-group">
										<div class="block"
											style="border-bottom: 1px solid lightgray;display: flex;justify-content: space-between;align-items: baseline;background-color: rgb(98, 131, 208);height: 45px;">
											<div class="block-title"
												style="padding-left: 10px;padding-top: 12px;color: aliceblue;">
												区块编号:</div>
											<div class="block-value" style="margin-right: 300px;color: aliceblue;">
												{{ block.blocknum }}
											</div>
										</div>
										<div class="block" style="border-bottom: 1px solid lightgray;">
											<div class="block-title" style="padding-left: 10px;">数据哈希:</div>
											<div class="block-value hash-field" style="padding-left: 10px;">
												{{ block.datahash }}
											</div>
										</div>
										<div class="block" style="border-bottom: 1px solid lightgray;">
											<div class="block-title" style="padding-left: 10px;">区块哈希:</div>
											<div class="block-value hash-field" style="padding-left: 10px;">
												{{ block.blockhash }}
											</div>
										</div>
										<div class="block" style="border-bottom: 1px solid lightgray;">
											<div class="block-title" style="padding-left: 10px;">前一哈希:</div>
											<div class="block-value hash-field" style="padding-left: 10px;">
												{{ block.prehash }}
											</div>
										</div>
										<div class="block" style="border-bottom: 1px solid lightgray;">
											<div class="block-title" style="padding-left: 10px;">创建日期:</div>
											<div class="block-value hash-field" style="padding-left: 10px;">
												{{ block.createdt }}
											</div>
										</div>
										<div class="block" style="border-bottom: 1px solid lightgray;">
											<div class="block-title" style="padding-left: 10px;">交易ID:</div>
											<div class="block-value hash-field"
												@click="showTransactionDetails(block.txhash[0])"
												style="padding-left: 10px;">
												<a class="transaction-link">{{ block.txhash[0] }}</a>
											</div>
										</div>
									</div>
									<div class="scroll-indicator"></div>
								</div>
							</el-card>
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<el-card style="max-width: 500px;height: 450px;margin-top: 0px;">
						<div
							style="font-family: 'Avenir', Helvetica, Arial, sans-serif;font-weight: bolder;font-size: larger;text-align: center;">
							<div style="padding-bottom: 8px;position: relative;">节点状态</div>
						</div>
						<el-table :data="peers" style="width: 100%;">
							<el-table-column prop="server_hostname" label="节点" width="180">
							</el-table-column>
							<el-table-column prop="mspid" label="所属组织" width="180">
							</el-table-column>
							<el-table-column label="在线状态">
								<template slot-scope="{ row }">
									<!-- 判断 row.status 的值，根据需要显示在线状态 -->
									<span v-if="row.status === 'UP'"><span class="jss119 jss121 false css-8ep84m"
											aria-label="Online"></span></span>
									<span v-else><span class="jss119 jss122 false css-8ep84m"
											aria-label="Online"></span></span>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-col>
			</el-row>
			<div style="margin: 20px 0"></div>
			<h1>区块信息</h1>
			<br />
			<hr />
			<br />
			<div>
				<div class="block">
				    <el-date-picker
				      v-model="value1"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				    </el-date-picker>
				    <el-button type="primary" @click="search()">search</el-button>
				  </div>
				<div>
					<table class="block-table" style="width: 100%;border-collapse: collapse;margin-top: 20px;">
					    <thead>
					        <tr>
					            <th style="border: 1px solid #ccc; background-color: rgb(98, 131, 208); color: white;text-align: center;">区块编号</th>
					            <th style="border: 1px solid #ccc; background-color: rgb(98, 131, 208); color: white;text-align: center;">数据哈希</th>
					            <th style="border: 1px solid #ccc; background-color: rgb(98, 131, 208); color: white;text-align: center;">区块哈希</th>
					            <th style="border: 1px solid #ccc; background-color: rgb(98, 131, 208); color: white;text-align: center;">前一哈希</th>
					            <th style="border: 1px solid #ccc; background-color: rgb(98, 131, 208); color: white;text-align: center;">创建日期</th>
					            <th style="border: 1px solid #ccc; background-color: rgb(98, 131, 208); color: white;text-align: center;">交易ID</th>
					        </tr>
					    </thead>
					    <tbody>
					        <tr v-for="(block,index) in blocksMore" :key="index">
					            <td>{{ block.blocknum }}</td>
					            <td style="border: 1px solid #ccc;">{{ block.datahash }}</td>
					            <td style="border: 1px solid #ccc;">{{ block.blockhash }}</td>
					            <td style="border: 1px solid #ccc;">{{ block.prehash }}</td>
					            <td style="border: 1px solid #ccc;" class="hash-field">{{ block.createdt }}</td>
					            <td style="font-family: monospace;text-overflow: ellipsis;white-space: nowrap;max-width: 300px;overflow: hidden;" @click="showTransactionDetails(block.txhash[0])">
					                <a style="color: darkblue;cursor: pointer;text-decoration: underline;color: blue;">{{ block.txhash[0] }}</a>
					            </td>
					        </tr>
					    </tbody>
					</table>

					<div style="margin-top: 20px">
						<el-pagination background :current-page="currentPage" :page-size="pageSize" :total="total"
							layout="prev, pager, next" @current-change="handleCurrentChange"></el-pagination>

					</div>
				</div>
			</div>

			<div class="block">
			    <el-date-picker
			      v-model="value1"
			      type="daterange"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期">
			    </el-date-picker>
			    <el-button type="primary" @click="search()">search</el-button>
			  </div>

			  <!-- 弹窗 -->
			<div id="app">
				<el-dialog title="区块详情" :visible.sync="dialogVisible" width="80%">
					<table class="transaction-table">
						<tbody>
							<tr>
								<td class="label">链码名称</td>
								<td class="value">{{ responseText.chaincodename }}</td>
							</tr>
							<tr>
								<td class="label">通道名称</td>
								<td class="value">{{ responseText.channelname }}</td>
							</tr>
							<tr>
								<td class="label">创建时间</td>
								<td class="value">{{ responseText.createdt }}</td>
							</tr>
							<tr>
								<td class="label">创建组织</td>
								<td class="value">{{ responseText.creator_msp_id }}</td>
							</tr>
							<tr>
								<td class="label">背书组织</td>
								<td class="value">{{ responseText.endorser_msp_id }}</td>
							</tr>
							<tr>
								<td class="label">交易哈希</td>
								<td class="value">{{ responseText.txhash }}</td>
							</tr>
						</tbody>
					</table>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import axios from 'axios';
	import {
		Dialog
	} from 'element-ui'; // 引入 Dialog 组件

	export default {
		components: {
			'el-dialog': Dialog, // 注册Dialog组件
		},
		data() {
			return {
        corsProxyURL:'http://127.0.0.1:8848/',
        baseURL:'http://192.168.31.214:9090',
				block: [],
				chaincodeCount: '',
				latestBlock: '',
				txCount: '',
				blocks: [],
				dialogVisible: false,
				responseText: '', // 存储响应结果的文本
				peers: [],

				// 区块信息
				value1: [],
				form: '',
				to: '',
				blocksMore: [],
				currentPage: 1,
				pageSize: 8,
				total: 0,
				allData: [],
			}
		},
		mounted() {
			this.blockchainLogin();
			this.getCurChannel();
			this.getBlockAndTxListCanvas();
			this.getBlockActivity()
			this.getStatus()
			this.getPeers()
			this.getTxByOrg();
			this.getBlockAndTxList()

		},
		methods: {
			// 分页
			calculateTotalPages() {
				const totalPages = Math.ceil(this.total / this.pageSize);
				if (this.currentPage > totalPages) {
					this.currentPage = totalPages;
				}
			},
			loadDataByPage() {
				const startIndex = (this.currentPage - 1) * this.pageSize;
				const endIndex = startIndex + this.pageSize;

				// 根据当前页数和每页显示的数据条数，从所有数据中切片获取当前页的数据
				this.blocksMore = this.allData.slice(startIndex, endIndex);
			},
			handleCurrentChange(pageNum) {
				this.currentPage = pageNum;
				this.loadDataByPage();
			},
			// 获取通道
			getCurChannel() {

        const url = this.baseURL+'/api/curChannel';
				// const url = 'http://192.168.31.214:9090/api/curChannel';
				const token = localStorage.getItem('token');
        // 使用cors-anywhere代理
				// const corsProxy = 'http://127.0.0.1:8848/';
        const corsProxy = this.corsProxyURL
				if (token) {
					axios.get(corsProxy + url, {
							headers: {
								Authorization: `Bearer ${token}`
							}
						})
						.then(response => {
							this.currentChannel = response.data.currentChannel;
							localStorage.setItem('currentChannel', this.currentChannel);
						})
						.catch(error => {
							console.error('Error fetching current channel:', error);
						});
				} else {
					console.error('Token not found. Please log in first.');
				}
			},
			blockchainLogin() {
        const url = this.baseURL+'/auth/login';
				// const url = 'http://192.168.31.214:9090/auth/login';

				const data = {
					user: 'exploreradmin',
					password: 'exploreradminpw',
					network: 'test-network',
				};

        const corsProxy = this.corsProxyURL
        // const corsProxy = 'http://127.0.0.1:8848/'; // 使用cors-anywhere代理
				axios.post(corsProxy + url, data)
					.then(response => {
						if (response.data.token) {
							localStorage.setItem('token', response.data.token);
						}
					})
					.catch(error => {
						console.error('Login Error:', error);
					});
			},
			getTxByOrg() {
        const baseUrl = this.baseURL+'/api/txByOrg/';
				// const baseUrl = 'http://192.168.31.214:9090/api/txByOrg/';
				const token = localStorage.getItem('token');

        const corsProxy = this.corsProxyURL
				// const corsProxy = 'http://127.0.0.1:8848/'; // 使用cors-anywhere代理

				const currentChannel = localStorage.getItem('currentChannel');
				if (currentChannel) {
					const url = `${corsProxy}${baseUrl}${currentChannel}`;
					if (token) {
						axios.get(url, {
								headers: {
									Authorization: `Bearer ${token}`
								}
							})
							.then(response => {
								this.drawBarChart(response.data.rows);
								console.log(response.data.rows)
							})
							.catch(error => {
								console.error('Error fetching transactions by organization:', error);
							});
					} else {
						console.error('Token not found. Please log in first.');
					}
				} else {
					console.error('Current Channel not found. Please fetch it first.');
				}
			},
			// 获取最近交易
			getBlockActivity() {

				const token = localStorage.getItem('token');
				const currentChannel = localStorage.getItem('currentChannel');
				// const corsProxy = 'http://127.0.0.1:8848/'; // 使用cors-anywhere代理
        const corsProxy = this.corsProxyURL

				if (token && currentChannel) {
          const url = `${corsProxy}`+this.baseURL+`/api/blockActivity/${currentChannel}`;
					// const url = `${corsProxy}http://192.168.31.214:9090/api/blockActivity/${currentChannel}`;

					axios.get(url, {
							headers: {
								Authorization: `Bearer ${token}`
							}
						})
						.then(response => {
							console.log('区块:', response.data.row);
							this.block = response.data.row; // 将响应数据赋值给blocks变量
						})
						.catch(error => {
							console.error('Error fetching block activity:', error);
						});
				} else {
					console.error('Token or currentChannel not found. Please log in and fetch current channel first.');
				}
			},
			// 获取交易详情
			showTransactionDetails(txhash) {
				console.log(txhash)
				this.getTransactionDetails(txhash)
					.then(response => {
						console.log(response.data.row)
						this.responseText = response.data.row;
						this.dialogVisible = true; // 显示模态框
						console.log(this.responseText)

					})
					.catch(error => {
						console.error('Error fetching transaction details:', error);
					});
			},
			// 获取交易详情
			getTransactionDetails(txhash) {
				// console.log(txhash)
				const currentChannel = localStorage.getItem('currentChannel');
				// const corsProxy = 'http://127.0.0.1:8848/';
        const corsProxy = this.corsProxyURL
        const baseUrl =this.baseURL+ '/api/transaction/';
				// const baseUrl = 'http://192.168.31.214:9090/api/transaction/';
				const token = localStorage.getItem('token');

				if (token) {
					const url = `${baseUrl}${currentChannel}/${txhash}`;
					return axios.get(corsProxy + url, {
						headers: {
							Authorization: `Bearer ${token}`
						}
					});
				} else {
					console.error('Token not found. Please log in first.');
					return Promise.reject(new Error('Token not found.'));
				}
			},
			// 获取状态
			getStatus() {
        const url = this.baseURL +'/api/status/';
				// const url = 'http://192.168.31.214:9090/api/status/';

				const token = localStorage.getItem('token');

				// const corsProxy = 'http://127.0.0.1:8848/'; // 使用cors-anywhere代理
        const corsProxy = this.corsProxyURL

				if (token) {
					// 从本地存储获取currentChannel
					this.currentChannel = localStorage.getItem('currentChannel');

					// 拼接currentChannel到URL路径后面
					const fullUrl = `${url}${this.currentChannel}`;

					axios.get(corsProxy + fullUrl, {
							headers: {
								Authorization: `Bearer ${token}`
							}
						})
						.then(response => {
							// console.log('Status Response:', response.data.chaincodeCount);
							this.chaincodeCount = response.data.chaincodeCount
							this.latestBlock = response.data.latestBlock
							this.txCount = response.data.txCount
						})
						.catch(error => {
							console.error('Error fetching status:', error);
						});
				} else {
					console.error('Token not found. Please log in first.');
				}
			},
			// 获取区块和交易
			getBlockAndTxListCanvas() {
				// this.refresh()
        const corsProxy = this.corsProxyURL
        // const corsProxy = 'http://127.0.0.1:8848/'; // 使用cors-anywhere代理
        const baseUrl = this.baseURL + '/api/blockAndTxList';
				// const baseUrl = 'http://192.168.31.214:9090/api/blockAndTxList';
				const token = localStorage.getItem('token');
				const currentChannel = localStorage.getItem('currentChannel');
				const fromDate = encodeURIComponent(this.form ? this.form : ''); // 从日历组件获取并进行转码
				const toDate = encodeURIComponent(this.to ? this.to : ''); // 从日历组件获取并进行转码

				if (token && currentChannel) {
					const url = `${baseUrl}/${currentChannel}/0?from=${fromDate}&to=${toDate}`;
					axios.get(corsProxy + url, {
							headers: {
								Authorization: `Bearer ${token}`
							}
						})
						.then(response => {
							console.log('区块信息:', response.data.rows.blocksData);
							this.blocks = response.data.rows.blocksData; // 将响应数据赋值给blocks变量
							this.allData = response.data.rows.blocksData;
							this.total = this.allData.length;
						})
						.catch(error => {
							console.error('Error fetching block and transaction list:', error);
						});
				} else {
					console.error('Token or currentChannel not found. Please log in and get current channel first.');
				}
			},
			// 获取节点状态
			getPeers() {
				// this.refresh()
        const corsProxy = this.corsProxyURL
				// const corsProxy = 'http://127.0.0.1:8848/'; // 使用cors-anywhere代理
        const baseUrl = this.baseURL+'/api/peersStatus';
				// const baseUrl = 'http://192.168.31.214:9090/api/peersStatus';
				const token = localStorage.getItem('token');
				const currentChannel = localStorage.getItem('currentChannel');

				if (token && currentChannel) {
					const url = `${baseUrl}/${currentChannel}`;
					axios.get(corsProxy + url, {
							headers: {
								Authorization: `Bearer ${token}`
							}
						})
						.then(response => {
							console.log('peers信息:', response.data.peers);
							this.peers = response.data.peers

						})
						.catch(error => {
							console.error('peer报错:', error);
						});
				} else {
					console.error('Token or currentChannel not found. Please log in and get current channel first.');
				}
			},
			// 查找区块
			getBlockAndTxList() {
				// this.refresh()
        const corsProxy = this.corsProxyURL
				// const corsProxy = 'http://127.0.0.1:8848/'; // 使用cors-anywhere代理
        const baseUrl = this.baseURL+'/api/blockAndTxList';
				// const baseUrl = 'http://192.168.31.214:9090/api/blockAndTxList';

				const token = localStorage.getItem('token');
				const currentChannel = localStorage.getItem('currentChannel');
				const fromDate = encodeURIComponent(this.form ? this.form : ''); // 从日历组件获取并进行转码
				const toDate = encodeURIComponent(this.to ? this.to : ''); // 从日历组件获取并进行转码

				if (token && currentChannel) {
					const url = `${baseUrl}/${currentChannel}/0?from=${fromDate}&to=${toDate}`;
					axios.get(corsProxy + url, {
							headers: {
								Authorization: `Bearer ${token}`
							}
						})
						.then(response => {
							console.log('区块信息:', response.data.rows.blocksData);
							this.blocksMore = response.data.rows.blocksData; // 将响应数据赋值给blocks变量
							this.allData = response.data.rows.blocksData;
							this.total = this.allData.length;
							this.loadDataByPage();
						})
						.catch(error => {
							console.error('区块错误:', error);
						});
				} else {
					console.error('区块token');
				}
			},
			// 搜索
			search() {
			      if (this.value1.length === 2) {
			        this.form = this.value1[0];
			        this.to = this.value1[1];
			        console.log("开始日期:", this.form);
			        console.log("结束日期:", this.to);
			        // 在这里处理获取到的日期范围
					this.getBlockAndTxList()
			      } else {
			        console.log("请选择开始日期和结束日期");
			      }
			    },
			drawBarChart(data) {
				console.log("---organizations---")
				console.log(data)
				const labels = data.map(item => item.creator_msp_id);
				const counts = data.map(item => item.count);

				const chartInstance = echarts.init(this.$refs.barChart);

				chartInstance.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						type: 'category',
						data: labels,
						axisLabel: {
							rotate: 45
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: counts,
						type: 'bar'
					}]
				});

				// 初始化 Echarts 实例
				const lineChart = echarts.init(this.$refs.lineChart);

				// 准备数据
				const blockNums = this.blocks.map(block => block.blocknum); // 区块编号数组
				const createdDates = this.blocks.map(block => block.createdt); // 区块创建日期数组

				// 构建折线图配置项
				const options = {
					title: {
						text: '区块创建日期趋势图',
						top: 5, // 设置标题距离图表顶部的距离
						left: 'center', // 标题水平居中对齐
					},
					xAxis: {
						type: 'category',
						data: blockNums // X 轴数据为区块编号
					},
					yAxis: {
						type: 'time',
						data: createdDates // Y 轴数据为区块创建日期
					},
					series: [{
						type: 'line',
						data: createdDates, // 折线图数据为区块创建日期
						markPoint: {
							data: [{
									type: 'max',
									name: '最大值'
								}, // 最大值标记
								{
									type: 'min',
									name: '最小值'
								} // 最小值标记
							]
						}
					}],
					tooltip: {
						trigger: 'axis', // 鼠标悬停时触发提示框
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'cross' // 十字准星指示器，通过十字线显示所有数据的值
						}
					}
				};

				// 设置配置项并渲染图表
				lineChart.setOption(options);


			},
		}
	}
</script>

<style>
	.input {
		width: 300px;
	}

	.block {
		max-width: 450px;
		margin: 0 auto;
	}

	.block-table {
		border-collapse: collapse;
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
	}

	.block-table th,
	.block-table td {
		border: 1px solid #ddd;
		padding: 8px;
		text-align: left;
	}

	.block-table th {
		background-color: #f2f2f2;
	}

	.label {
		font-weight: bold;
		width: 30%;
	}

	.value {
		width: 70%;
	}

	.hash-field {
		word-wrap: break-word;
		max-width: 200px;
	}

	.login {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.login-bg {
		width: 100%;
		height: 100%;
		background: white;
	}

	/* 三个图片 */
	.card-wrapper {
		display: flex;
		justify-content: center;
	}

	.box-card {
		width: 80%;
		max-width: 1500px;
		font-size: 16px;
		margin-left: 400px;
	}

	.content-wrapper {
		display: flex;
	}

	.content-item {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 20px;
		padding: 10px;
	}

	.icon {
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.label-value-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.label {
		font-weight: bold;
	}

	.value {
		color: #333;
		font-size: 16px;
	}

	/* 最近交易 */
	.blocks-container {
		display: flex;
		flex-wrap: wrap;
	}

	.block-card {
		margin: 10px;
		overflow: auto;
		max-width: 500px;
	}

	.block-group {
		background-color: transparent;
		line-height: 1.6;
		padding: 10px;
		min-height: 40px;
	}

	.block {
		margin-bottom: 10px;
	}

	.block-title {
		font-weight: bold;
	}

	.block-value {
		margin-top: 5px;
	}


	.hash-field {
		font-family: monospace;
		/* 使用等宽字体以更好地显示哈希值 */
		max-width: 300px;
		/* 设置最大宽度以防止表格变得过宽 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* 当内容超过宽度时显示省略号 */
	}

	.transaction-link {
		cursor: pointer;
		color: blue;
		text-decoration: underline;
	}

	.scrollable-container {
		max-height: 450px;
		/* 设置最大高度 */
		overflow-y: auto;
		/* 当内容溢出时显示滚动条 */

		/* 隐藏滚动条 */
		scrollbar-width: thin;

		scrollbar-color: transparent transparent;
	}

	/* Webkit浏览器（如Chrome、Safari）滚动条样式 */
	.scrollable-container::-webkit-scrollbar {
		width: 6px;
		/* 设置滚动条宽度 */
	}

	.scrollable-container::-webkit-scrollbar-thumb {
		background-color: transparent;
		/* 设置滚动条颜色为透明 */
	}

	.scrollable-container::-webkit-scrollbar-track {
		background-color: transparent;
		/* 设置滚动条轨道颜色为透明 */
	}

	.block-wrapper {
		display: flex;
		position: relative;
	}

	.block-wrapper:before {
		content: '';
		width: 3px;
		/* 竖线的宽度 */
		background-color: rgb(98, 131, 208);
		/* 竖线的颜色 */
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
	}

	.scroll-indicator {
		position: absolute;
		bottom: 10px;
		/* 调整箭头图标的位置 */
		left: -3px;
		/* 调整箭头图标的位置 */
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 8px solid rgb(98, 131, 208);
		/* 箭头颜色 */
	}

	/* 弹窗 */
	.transaction-table {
		width: 100%;
		border-collapse: collapse;
	}

	.transaction-table td {
		padding: 8px;
	}

	.transaction-table .label {
		font-weight: bold;
		background-color: #f2f2f2;
		width: 120px;
	}

	.transaction-table .value {
		color: #333;
		font-size: 16px;
	}

	.transaction-table tr:nth-child(even) {
		background-color: #f9f9f9;
	}

	/* 表格 */
	.cell {
		margin-bottom: 8px
	}

	/* 在线状态 */
	.jss121 {
		background-color: green;
	}

	.jss119 {
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
	}

	.jss122 {
		background-color: red;
	}
</style>
